	<style type="text/css">
		.cc{
			position:relative;
			overflow:auto;
			width:400px;
			height:200px;
			background:#fafafa;
			border:1px solid #ccc;
		}
		#dd1{
			margin:0px;
			width:100px;
			height:100px;
			background:#fff;
			border:1px solid #ccc;
		}
		#dd2{
			width:100px;
			height:100px;
			background:#fafafa;
			border:1px solid #ccc;
			position:absolute;
			left:600px;
			top:200px;
		}
		#dd3{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
			left:450px;
			top:200px;
		}
	</style>
	<h2>一般拖动 - Draggable</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>通过鼠标移动下面的方块。</div>
	</div>
	<div style="margin:10px 0"></div>
	
	<div class="cc">
		<div id="dd1" class="easyui-draggable">
			<a href="#" onclick="javascript:$('#dd1').draggable('enable')">开始拖动</a><br/>
			<a href="#" onclick="javascript:$('#dd1').draggable('disable')">停止拖动</a><br>
            【我能拖动】
		</div>
	</div>
	<div id="dd2" class="easyui-draggable" data-options="handle:'#title'">
		<div id="title" style="padding:5px;background:#ccc;">Title</div>
	</div>
	<div id="dd3" class="easyui-draggable"></div>
<h3>页面代码： </h3>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
	&lt;title&gt;Draggable - jQuery EasyUI demo&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/icon.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;demo.css&quot;&gt;
	&lt;style type=&quot;text/css&quot;&gt;
		.cc{
			position:relative;
			overflow:auto;
			width:400px;
			height:200px;
			background:#fafafa;
			border:1px solid #ccc;
		}
		#dd1{
			margin:0px;
			width:100px;
			height:100px;
			background:#fff;
			border:1px solid #ccc;
		}
		#dd2{
			width:100px;
			height:100px;
			background:#fafafa;
			border:1px solid #ccc;
			position:absolute;
			left:600px;
			top:200px;
		}
		#dd3{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
			left:450px;
			top:200px;
		}
	&lt;/style&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h2&gt;一般拖动 - Draggable&lt;/h2&gt;
	&lt;div class=&quot;demo-info&quot;&gt;
		&lt;div class=&quot;demo-tip icon-tip&quot;&gt;&lt;/div&gt;
		&lt;div&gt;通过鼠标移动下面的方块。&lt;/div&gt;
	&lt;/div&gt;
	&lt;div style=&quot;margin:10px 0&quot;&gt;&lt;/div&gt;
	
	&lt;div class=&quot;cc&quot;&gt;
		&lt;div id=&quot;dd1&quot; class=&quot;easyui-draggable&quot;&gt;
			&lt;a href=&quot;#&quot; onclick=&quot;javascript:$('#dd1').draggable('enable')&quot;&gt;开始拖动&lt;/a&gt;&lt;br/&gt;
			&lt;a href=&quot;#&quot; onclick=&quot;javascript:$('#dd1').draggable('disable')&quot;&gt;停止拖动&lt;/a&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div id=&quot;dd2&quot; class=&quot;easyui-draggable&quot; data-options=&quot;handle:'#title'&quot;&gt;
		&lt;div id=&quot;title&quot; style=&quot;padding:5px;background:#ccc;&quot;&gt;Title&lt;/div&gt;
	&lt;/div&gt;
	&lt;div id=&quot;dd3&quot; class=&quot;easyui-draggable&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>
